<template>
  <div class="address-margin-30">
    <el-card shadow="hover" class="margin-30">
      <div slot="header">
        <el-button
          type="primary"
          size="mini"
          @click="addAddress"
        >新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="addressList"
        border
        stripe
      >
        <el-table-column
          align="center"
          label="#"
          type="index"
          width="50"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
          width="150"
          align="center"
        />
        <el-table-column label="默认发货地址" width="200" align="center">
          <template slot-scope="scope">
            默认发货地址:<el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('sendStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人电话"
          width="150"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="收货人地址"
          align="center"
        >
          <template slot-scope="scope">
            <p>
              {{ scope.row.province }}
              {{ scope.row.city }}
              {{ scope.row.region }}
            </p>
            <p>
              {{ scope.row.detailAddress }}
            </p>
          </template>
          <!-- <template slot-scope="scope">默认收货地址：
            <el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('sendStatus', scope.row)"
            />
          </template> -->
        </el-table-column>
        <el-table-column
          label="默认收货地址"
          width="200"
          align="center"
        >
          <template slot-scope="scope">默认收货地址：
            <el-switch
              v-model="scope.row.sendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus('sendStatus', scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"
        />
        <el-table-column
          label="操作"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="goEdit(scope.row)">编辑
            </el-button>
            <el-button type="text" size="mini" @click="goDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <AddressDetail ref="AddressDetail" @success="addSuccess" />
  </div>
</template>
<script>
import { getAddressList as addressApi } from '@/api/order/address'
import AddressDetail from './detail/address.vue'
export default {
  name: 'AddressList',
  components: {
    AddressDetail
  },
  data() {
    return {
      loading: false,
      addressList: []
    }
  },
  created() {
    this.getAddressList()
  },
  methods: {
    // 打开新增页面
    addAddress() {
      this.$refs.AddressDetail.openAddressDetail()
    },
    // 控制新增页面显示隐藏
    addSuccess() {
      this.getAddressList()
    },
    // 获取地址列表
    getAddressList() {
      /* this.loading = true */
      addressApi().then((res) => {
        if (res.success) {
          this.addressList = res.data.items
        } else {
          this.$message.warning('请求失败')
        }
        this.loading = false
      })
    },
    switchStatus() {

    },
    goEdit() {

    },
    goDelete() {

    }
  }
}
</script>
<style lang="scss" scoped>
.address-margin-30{
  .margin-30{
    margin: 30px;
  }
}
</style>
